//布局header组件
import { Button, Col, Row } from "antd";
import { Fragment, useState } from "react";
import {
  DoubleLeftOutlined,
  DoubleRightOutlined,
  DownloadOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from "@ant-design/icons";
import PubSub from "pubsub-js";
import "./Header.css";
import { useNavigate } from "react-router-dom";

export const HeaderCom = () => {
  let [collapsed, setCollapsed] = useState(true);
  // let [collapsed, setCollapsed] = useState<boolean>(true);
  let isCollapsed = () => {
    setCollapsed(!collapsed);
    PubSub.publish("Collapsed", collapsed);
  };
  let navigate = useNavigate();
  //透出登录
  let logout = () => {
    navigate("/login");
    sessionStorage.removeItem("token");
  };
  return (
    <Fragment>
      <Row>
        <Col span={8}>
          <Button
            type="primary"
            style={{ marginBottom: 16 }}
            onClick={isCollapsed}
          >
            {collapsed ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
          </Button>
        </Col>
        <Col span={8}>
          <div className="txt_string">
            <span>加速系统</span>
          </div>
        </Col>
        <Col span={8}>
          <div className="txt_string2">
            {/* <Button type="">退出登录</Button> */}
            <Button
              type="primary"
              icon={<DownloadOutlined />}
              onClick={logout}
              ghost
            >
              退出登录
            </Button>
          </div>
        </Col>
      </Row>
    </Fragment>
    // <h1>header</h1>
  );
};
